<template>
    <div class="updata">
        <p>
            <span class="projectBtn" :class="type==0?'activeColor':''" @click="handleClick(0)">项目</span>
            <span class="drillBtn" :class="type==1?'activeColor':''" @click="handleClick(1)">钻孔</span>
        </p>
        <el-row justify="space-around" class="ranking" style="margin-top: 1ß0px">
            <el-col class="ranking-item" :span="7">
              <span></span>
              <span style="font-size: 18px;">{{ form.lastYearRenew }}</span>
              <span>上一年</span>
            </el-col>
            <el-col class="ranking-item" :span="10">
              <span>{{ form.accumulateRenew  }}</span>
              <span class="total">累计量</span>
              <span></span>
            </el-col>
            <el-col class="ranking-item" :span="7">
              <span></span>
              <span style="font-size: 18px;">{{ form.currentYearRenew }}</span>
              <span>当前年</span>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
const emits = defineEmits(['onClick']);
const props = defineProps({
    projectDrillTotalUpdata:{
        type:Array,
        required:true,
        default:[],
    },
    type:{
        type:Number,
        required:true,
        default:0,
    }
})

const {projectDrillTotalUpdata,type} = toRefs(props)
const form = ref({});

const handleClick =(type)=>{
    emits('onClick',type)
}
onMounted(()=>{
    form.value = projectDrillTotalUpdata.value.filter(item=>item.type==type.value)[0];
    watch(()=>props.type,()=>{
        form.value = projectDrillTotalUpdata.value.filter(item=>item.type==type.value)[0];
  })
})
</script>

<style lang="scss" scoped>
.updata{
    p{
        margin-top: 10px;
        text-align: center;
        padding: 0;
        // margin: 0;
    }
    .projectBtn,.drillBtn{
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #418DFD;
        background-image: url('/src/assets/images/drill/bgImg1.png');
        background-repeat: no-repeat;
        background-size: contain;
    }
    .projectBtn{
        margin-right: 5px;
    }
    .drillBtn{
        margin-left: 5px;
    }
    .activeColor{
        color: #FFFFFF;
        background-image: url('/src/assets/images/drill/bgImg2.png');
        font-weight: 400;
    }
    .ranking{
        min-height: 200px;
        .ranking-item {
      background-image: url('/src/assets/images/activeFault/ranking1.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      position: relative;

      &>span {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        font-family: Helvetica Neue LT Pro-65 Medium, Helvetica Neue LT Pro;
        font-weight: normal;
        color: #46FFFF;
      }

      &>span:nth-child(2) {
        top: 38%;
        font-size: 16px;
        font-weight: 500;
        color: #46FFFF;
        padding: 4px 7px;
        font-size: 16px;
      }
      .total{
        background: linear-gradient(134deg, #7DE7FF 0%, #00CFFF 50%, #7DE7FF 100%);
        top: 40%;
        font-weight: 500;
        color: #050426!important;
        padding: 4px 7px;
        font-size: 16px;
      }

      &>span:nth-child(3) {
        top: unset;
        font-weight: normal;
        color: #fff;
        font-size: 14px;
        bottom: 10%;
      }

      &:nth-child(2) {
        background-image: url('/src/assets/images/activeFault/ranking2.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position-y: 26%;

        &>span {
          font-size: 30px;
          top: 14%;
        }

        &>span:nth-child(2) {
          font-size: 18px;
          top: 35%;
        }

        &>span:nth-child(3) {
          font-size: 14px;
          bottom: 5%;
          top: unset;
        }
      }
    }
    }
}
</style>